import {UseEffectHooks} from "./study/hooks/UseEffectHooks";
import {UseRefHooks} from "./study/hooks/UseRefHooks";
import Demo from './components/header';
import Vote from './components/vote';
import {IndexContent} from "./views/indexView/IndexContent";
import VoteClazz from './clazz/VoteClazz';
import ClazzCreateRefGetDom from './components/ref/ClazzCreateRefGetDom';
import SetStateFlushSync from "./components/setState/SetStateFlushSync";
import SetStateSetTimeOut from "./components/setState/SetStateSetTimeOut";
import SetStateForTest from "./components/setState/SetStateForTest";
import MergeEvents from "./components/events/MergeEvents";
import EventCaptcha from "./components/events/EventCaptcha";
import ToDoList from "./views/todoListClazzComponents/ToDoList";
import {UseStateHooks} from "./study/hooks/UseStateHooks";
import {UseLayOutEffectHooks} from "./study/hooks/UseLayOutEffectHooks";
import {UseMemoHooks} from "./study/hooks/UseMemoHooks";
import {UseCallBackHooks} from "./study/hooks/UseCallBackHooks";
import {HooksByMeComp} from "./study/hooks/HooksByMeComp";
import CompoundClazzComp from "./study/compoundComponents/CompoundClazzComp";
import {CompoundHooksComp} from "./study/compoundComponents/CompoundHooksComp";
import {AncestorsComponents} from "./study/compoundComponents/AncestorsComponents";
import {CssBasicStyle} from "./study/globalStyle/basic/CssBasicStyle";
import {CssModuleStyle} from "./study/globalStyle/cssModules/CssModuleStyle";
import {ReactJssStyle} from "./study/globalStyle/reactJss/ReactJssStyle";
import ReactHoc from './study/hoc/ReactHoc';
import ReactClazzProxy from './study/hoc/ReactHocClazz';
import React from "react";
import {Button, Tag} from "antd";
import ReduxStudy from "./study/redux/ReduxStudy";
import {StyledComponents} from "./study/globalStyle/styledComponents/StyledComponents";
import {FetchComp} from "./study/fetch/FetchComp";
import ToolKitComp from "./study/toolKit/ToolKitComp";
import {DefinePropertyCom} from "./study/property/DefinePropertyCom";
import MobxComp from "./study/mobx/MobxComp";
import MobxEncapsulationComp from './study/mobx/MobxEncapsulationComp';
import {UseReducer} from './study/useReducer/UseReducer';
const  title = [
    {
        label: '类组件初识与类组件中使用useState',
        value: <VoteClazz/>,
        key: '0',
        level:'',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: '类组件获取dom',
        value: <ClazzCreateRefGetDom/>,
        key: '1',
        desc:'',
        codeDir:'类组件获取dom',
        tags:[]
    },
    {
        label: 'setState同步刷新',
        value: <SetStateFlushSync/>,
        key: '2',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: 'setState测试',
        key: '3',
        value: <SetStateForTest/>,
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label:'合成事件',
        key: '4',
        value: <MergeEvents/>,
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: '事件冒泡与事件捕获',
        value: <EventCaptcha/>,
        key: '5',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: 'TODO-List练习',
        value: <ToDoList/>,
        key: '6',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: '函数式组件使用setState',
        key: '7',
        value: <UseStateHooks/>,
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: 'hooks组件/函数式组件对于useEffect的使用',
        value: <UseEffectHooks/>,
        key: '8',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: 'useLayOutEffectHooks',
        value: <UseLayOutEffectHooks/>,
        key: '9',
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: '通过ref获取dom',
        key: '10',
        value: <UseRefHooks/>,
        desc:'',
        codeDir:'',
        tags:[]
    },
    {
        label: '基于useMemo构建计算缓存',
        key: '11',
        value: <UseMemoHooks/>,
        desc:'计算缓存减轻性能',
        codeDir:'',
        tags:[]
    },
    {
        label: '基于UseCallBack缓存函数引用',
        key: '12',
        value: <UseCallBackHooks/>,
        desc:<>
            组件每次创建，内部函数都会<b>重新运行</b>,<pre><cod>useCallBack</cod></pre>会让函数保存最开始的引用，不让每次都重新创建,以降低性能消耗
        </>,
        codeDir:'',
        tags:[]
    },
    {
        label:'自定义hooks',
        key: '13',
        value: <HooksByMeComp/>,
        desc: <>
            使用自定义hooks可以将某些组件逻辑提取到可重用的函数中（实现某些逻辑的重用）
        </>,
        codeDir:'自定义hooks',
        tags:[]
    },
     {
         label:'复合组件',
         key: '14',
         value: <CompoundClazzComp/>,
         desc: <>
             复合组件
         </>,
         children:[
             {
                 label:'复合组件-类组件',
                 key: '14-1',
                 value: <CompoundClazzComp/>,
                 desc: <>
                     复合组件-类组件
                 </>,
                 tags:[]
             },
             {
                 label:'函数式组件',
                 key: '14-2',
                 value: <CompoundHooksComp/>,
                 desc: <>
                     复合组件-函数式组件
                 </>,
                 tags:[]
             },
             {
                 label:'祖先组件',
                 key: '14-3',
                 value: <AncestorsComponents/>,
                 desc: <>
                     祖先组件与后代组件通信
                 </>,
                 tags:<>
                     {/*TODO 点击tag弹出描述
                     目前考虑的是弹出markdown
                     */}
                 <Tag color={'magenta'}>上下文</Tag>
                 </>
             }
         ],
         codeDir:''
     },
     {
         label:'react样式私有化处理',
         key: '15',
         value: <CssBasicStyle/>,
         desc: <>
             复合组件
         </>,
         children:[
             {
                 label:'基础方案-内敛样式',
                 key: '15-1',
                 value: <CssBasicStyle/>,
                 desc: <>
                     样式的私有化处理，导入css文件的话多个组件同样的className会导致样式被后面的css覆盖
                     <Tag color={'magenta'}>基础方案就是内联样式即style</Tag>
                 </>,
                 tags:[]
             },
             {
                 label:'cssModules方案',
                 key: '15-2',
                 value: <CssModuleStyle/>,
                 desc: <>
                     样式的私有化处理，使用<pre><code>xxx.module.css</code></pre>解决
                     <Tag color={'magenta'}>cssModules方案就是xxx.module.css</Tag>
                 </>,
                 tags:[]
             },
             {
                 label:'reactJss方案',
                 key: '15-3',
                 value: <ReactJssStyle/>,
                 desc: <>
                     样式的私有化处理，使用<pre><code>react-jss</code></pre>解决
                     <Tag color={'magenta'}>react-jss</Tag>
                 </>,
                 tags:[]
             },
             {
                 label:'reactJss方案解决类组件',
                 key: '15-4',
                 value: <ReactClazzProxy/>,
                 desc: <>
                     <pre><code>react-jss</code></pre>不能处理类组件，使用高阶组件(HOC)来解决这个问题
                     <Tag color={'magenta'}>HOC</Tag>
                 </>,
                 tags:[]
             },
             {
                 label:'styled-components',
                 key: '15-5',
                 value: <StyledComponents/>,
                 desc: <>
                     style-components解决
                     <Tag color={'magenta'}>style-components</Tag>
                 </>,
                 tags:[]
             }

         ],
         codeDir:''
     },
     {
         label:'react高阶组件(HOC)',
         key: '16',
         value: <ReactHoc x={1} y={1}/>,
         desc: <>
             使用js的闭包(柯里化)实现组件的代理，可以在实际渲染的组件上再抽象一层
         </>,
         codeDir:'',
         tags:[]
     },
     {
         label:'redux',
         key: '17',
         value: <ReduxStudy/>,
         desc: <>
             redux
         </>,
         codeDir:'',
         tags:[]
     },
    {
      label:'redux-toolkit',
      key: '18',
      value: <ToolKitComp/>,
      desc:<>
        redux-toolkit
      </> ,
        codeDir:'',
        tags:[]
    },
    {
        label: 'fetch',
        key: '19',
        value: <FetchComp/>,
        desc: <>
            fetch
        </>,
        codeDir: '',
        tags:[]
    },
    {
        label: 'Object.defineProperty',
        key: '20',
        value: <DefinePropertyCom/>,
        desc: <></>,
        codeDir:'',
        tags:[]
    },
    {
        label: 'mobx',
        key: '21',
        value: <MobxComp/>,
        desc: <></>,
        codeDir:'',
        children: [
            {
                label: 'mobx基础使用',
                key: '21-1',
                value: <MobxComp/>,
                desc: <></>,
                codeDir:'',
                tags:[]
            },
            {
                label: 'mobx封装',
                key: '21-2',
                value: <MobxEncapsulationComp/>,
                desc: <></>,
                codeDir:'',
                tags:[]
            }
        ],
        tags:[]
    },
    {
        label: 'useReducer',
        key: '22',
        value: <UseReducer/>,
        desc: <></>,
        codeDir:'',
        tags:[]
    },
]

export  {
     title,IndexContent
};
